<template>
  <a-form-model-item :label="label" :prop="prop">
    <a-range-picker
      class="readonly"
      v-if="readonly"
      v-model="form[prop]"
      :placeholder="placeholder"
      :format="format"
      :valueFormat="valueFormat"
      disabled
      style="width: 100%;background-color:#fff;color: rgba(0, 0, 0, 0.65);cursor: auto;"
    />
    <a-range-picker
      v-else
      v-model="form[prop]"
      :showTime="{
        hideDisabledOptions: true,
        defaultOpenValue: moment('00:00:00', 'HH:mm:ss'),
        format: format,
        hourStep: hourStep,
        minuteStep: minuteStep,
        secondStep: secondStep
      }"
      :mode="['time', 'time']"
      :placeholder="placeholder"
      :format="format"
      :disabled="disabled"
      :valueFormat="valueFormat"
      :defaultOpenValue="[moment('00:00:00', 'HH:mm:ss'), moment('00:00:00', 'HH:mm:ss')]"
      dropdownClassName="rangeTimePicker"
      style="width: 100%;"
    />
  </a-form-model-item>
</template>

<script>
import moment from 'moment';
export default {
  name: 'RangeTimePicker',
  props: {
    // 绑定的对象
    form: {
      type: Object,
      default: () => {
        return {};
      }
    },
    // 绑定对象的属性
    prop: {
      type: String,
      default: 'attribute'
    },
    // 文字
    label: {
      type: String,
      default: ''
    },
    // 显示日期格式
    format: {
      type: String,
      default: 'HH:mm:ss'
    },
    // 生成数据日期格式
    valueFormat: {
      type: String,
      default: 'HH:mm:ss'
    },
    hourStep: {
      type: Number,
      default: 1
    },
    minuteStep: {
      type: Number,
      default: 1
    },
    secondStep: {
      type: Number,
      default: 1
    },
    placeholder: {
      type: Array,
      default: () => {
        return ['开始时间', '结束时间'];
      }
    },
    // 禁止操作
    disabled: {
      type: Boolean,
      default: false
    },
    // 只读
    readonly: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      inputValue: undefined
    };
  },
  methods: {
    moment
    // checkIt() {
    //   this.$emit('showDialog');
    // }
  }
};
</script>
<style>
  .rangeTimePicker .ant-input-disabled{
    background-color:#fff;color: rgba(0, 0, 0, 0.65);cursor: auto;
  }
  .rangeTimePicker .ant-calendar-range.ant-calendar-time .ant-calendar-time-picker-inner{
    padding-top: 0;
  }
  .rangeTimePicker .ant-calendar-time .ant-calendar-footer .ant-calendar-time-picker-btn{
    display: none;
  }
</style>
